<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>demo18-jquery tab标签页</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <style>

        *{padding: 0;margin: 0;}
        ul{height: 30px;margin-bottom: 10px;}
        ul li{cursor:pointer;list-style-type: none;height: 30px;line-height: 30px;padding: 0 15px;border:1px solid #abcdef;float: left;margin-right: 3px;}
        ul li.current{background: #abcdef}
        #content div{width: 300px;height: 200px;border: 1px solid #abcdef;display: none;}
        body{margin: 50px;}

        #content div.show{display: block;}
    </style>

</head>
<body>
    <ul id="ul">
        <li class="current">php</li>
        <li>ruby</li>
        <li>python</li>
    </ul>
    <div id="content">
        <div class="show">1111</div>
        <div>2222</div>
        <div>3333</div>
    </div>
</body>
</html>

<script>
   $('#ul li').click(function () {
      // $(this).addClass('current').siblings().removeClass('current');
//       var _index = $(this).index();
      // $("#content > div").eq($(this).index()).addClass('show').siblings().removeClass('show');

//       简写
       $(this).addClass('current').siblings().removeClass('current').end().parent('ul').next('#content').children().eq($(this).index()).show().siblings().hide();
   })

</script>